<!--
 * @Author: honghong
 * @Date: 2019-10-16 15:51:40
 * @LastEditors: honghong
 * @LastEditTime: 2019-10-16 17:12:21
 * @Description: 
 * @email: 3300536651@qq.com
 -->
<div class="fc-templatelist">
  <div class="fc-toolbar">
    <button nz-button nzType="primary">新增</button>
    <button nz-button nzType="primary">修改</button>
    <button nz-button nzType="primary">删除</button>
    <button nz-button nzType="primary">查看</button>
  </div>
  <form class="fc-searchbar">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="6" class="fc-searchbar-item">
        <label for="name" class="fc-searchbar-label">姓名</label>
        <input class="fc-searchbar-control" nz-input placeholder="请输入姓名" [(ngModel)]="searchObj.name" name="name" />
      </div>
      <div nz-col [nzSpan]="6" class="fc-searchbar-item">
        <label for="age" class="fc-searchbar-label">年龄</label>
        <input class="fc-searchbar-control" nz-input placeholder="请输入年龄" [(ngModel)]="searchObj.age" name="age" />
      </div>
      <div nz-col [nzSpan]="6" class="fc-searchbar-item">
        <label for="address" class="fc-searchbar-label">地址</label>
        <input class="fc-searchbar-control" nz-input placeholder="请输入地址" [(ngModel)]="searchObj.address"
          name="address" />
      </div>
      <div nz-col [nzSpan]="6" class="fc-searchbar-btn">
        <button nz-button nzType="primary">查询</button>
      </div>
    </div>
  </form>
  <div class="fc-templatelist-content">
    <nz-table #headerTable [nzData]="listOfData" [nzPageSize]="50" [nzScroll]="tableScroll" [nzBordered]="true">
      <thead>
        <tr>
          <th nzWidth="150px">Name</th>
          <th nzWidth="150px">Age</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of headerTable.data">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>
